<!--
 @description 自定义商品SPU展示页面
 @fileName index.vue
 @author zengqiongying
 @created 2023-03-07 17:17:16
-->
<template>
  <div class="custom-page">
    <MineHeader arrow :title="pageName" />
    <NavFilter ref="navFilter">
      <keep-alive>
        <router-view :sku-codes="skuCodes" is-custom-spu />
      </keep-alive>
    </NavFilter>
    <van-loading v-if="!loadPageState" size="24px" vertical>{{ loadText }}</van-loading>
  </div>
</template>

<script>
import MineHeader from '@/components/MineHeader'
import NavFilter from '@/components/NavFilter'
import { mapMutations } from 'vuex'
import commonMixin from './mixin'
export default {
  name: 'CustomSpuProduct',
  components: { MineHeader, NavFilter },
  mixins: [commonMixin],
  data() {
    return {
      pageId: this.$route.params.id
    }
  },

  computed: {

  },
  watch: {
    pageId(val) {
      sessionStorage.removeItem('customSpuContent')
      this.getSkuCodes()
    }
  },

  created() {
    this.getSkuCodes()
  },
  activated() {
    this.pageId = this.$route.params.id || ''
  },
  mounted() {

  },
  beforeRouteLeave(to, from, next) {
    const names = ['HomeIndex', 'GoodsIndex', 'GoodsThreeNavList', 'CustomPage', 'DefineTabNavigation']
    if (names.includes(to.name)) {
      this.$removeKeepAliveCache(this)
      this.updateFilterData([])
      sessionStorage.removeItem('customSpuContent')
    }
    next()
  },
  methods: {
    ...mapMutations('nav', ['updateFocus', 'updateFilterData']),
    async getSkuCodes() {
      try {
        const pageContent = sessionStorage.getItem('customSpuContent')
        if (pageContent) {
          const data = JSON.parse(pageContent)
          if (data.id === this.pageId) {
            this.pageName = data.name
            this.getProductSkuCode(data)
            return
          }
        }
      } catch {
        sessionStorage.removeItem('customSpuContent')
      }
      this.getCustomPageContent(true, (data) => {

      })
    }
  }
}

</script>
<style lang='less' scoped>
/deep/ .more-close{
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.08);
}
.custom-page{
  padding-top:44PX;
  padding-bottom: 16px;
}
</style>
